<template>
  <div> 
    <div class="header-Main" style="margin-top: 10px; margin-left: 5px;">  
        <el-input v-model="title" placeholder="输入内容" suffix-icon="el-icon-search" style="width: 500px;"></el-input>
        <el-button type="primary" style=" margin-left: 20px;">
          <div @click="add" style="color: aliceblue;">增加<i class="el-icon-circle-plus-outline iconadd" style="font-size: 15px;"></i></div>
        </el-button>
    </div>

    <div v-if="this.tableData != null && this.tableData != ''">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
        border style="width: 100%">

        <el-table-column prop="image" label="图片" width="140">
          <template slot-scope="scope">
            <div class="image">
              <img :src="scope.row.songs[0].image" style="height: 100%;width: 100%;">
            </div>
          </template>
        </el-table-column>

         <el-table-column prop="name" label="歌曲">
          <template slot-scope="scope">{{ scope.row.songs[0].name}}</template>
        </el-table-column>
  
        <el-table-column prop="album" label="专辑">
          <template slot-scope="scope">{{ scope.row.songs[0].album }}</template>
        </el-table-column>
  
        <el-table-column width="250" label="操作">
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" circle @click="handlDelete(scope.row.songId)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-else>
      没有歌曲
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
    data() {
        return {
          SongListId:'',
          title:'',
          tableData: [],
          SongId:''
        }
      },
    methods:{
      ...mapMutations('song1',['getSingerId']),
        add(){
          this.getSingerId(this.SongListId)
          this.$router.push("/addlistsong")
        },
        async getall(){
          const res = await this.$axios.get(`ListSong/SelectBySongListId/${this.SongListId}`)
          console.log("asasass")
          console.log(res)
          if(res.length <=0){
            this.tableData = null
            return
          }
          this.tableData = res
        },
        async handlDelete(val){
          console.log("delel llsong")
          console.log(val)
          const res = await this.$axios.delete(`ListSong/DeleteListSong?songId=${val}&songListId=${this.SongListId}`)
          if(res.code == 200){
            this.getall()
            this.$message.success(res.msg)
          }
          else{
            this.$message.error(res.msg)
          }
        }
    },

    computed:{
      ...mapState('song1',['SingerId']),
    },
    created(){
      this.SongListId = this.SingerId
      this.getall()
    }
}
</script>

<style lang="less" scoped>
  .header-Main{
    margin-bottom: 10px;
  }
  
  .iconadd{
    display: inline-block;
    font-size: 5px;
    padding-left: 5px;
  }
  
  .pageion{
    display: flex;
    margin-top: 30px;
    justify-content: center;
  }
  .image{
    height: 120px;
    width: 120px;
  }
  ::v-deep .el-table th{
      text-align: center;
    }
    ::v-deep .el-table td, .el-table th {
      text-align: center;
    }
</style>